// 导入基础库
import React from 'react';
import { history, connect } from 'umi';
// 导入配置参数
import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import { menusProps } from './layout.d';
import routes from '../../config/routes';
// 导入处理函数
// 导入UI组件
import IconMap from '../utils/icons';
import ProLayout from '@ant-design/pro-layout';
import { Divider } from 'antd';
// 导入LESS样式
import styles from './layout.less';

const PageView = (props) => {
  const { table: tb, dispatch: dp } = props;

  const loopMenuItem = (menus) => {
    // 生成菜单函数
    let menut = menus.map(({ auth,view, icon, routes, ...item }) => {
      if(tb.user.auth==='user'){
        if(auth !== tb.user.auth){
          console.log(auth,tb.user.auth)
          view = false
        }
      }
      var m = {
        ...item,
        icon: IconMap[icon],
        view: view || true,
        children: routes ? loopMenuItem(routes) : [],
      };
      if (view !== false) return m;
    });
    return menut;
  };

  const menu_onClick = (path) => {
    // 菜单点击事件函数
    history.push(path);
  };

  return (
    <ConfigProvider locale={zhCN}>
      <ProLayout
        {...menusProps}
        menuDataRender={() => loopMenuItem(routes[1].routes)}
        menuItemRender={(item, dom) => (
          <div className={styles.menus} onClick={() => menu_onClick(item.path)}>
            {dom}
          </div>
        )}
        rightContentRender={() => (
          <div className={styles.right}>
            {IconMap['renyuan']}操作员：{tb.user.user}{' '}
            <Divider type="vertical" />{' '}
            <a
              href="#"
              onClick={() => {
                history.push('/login');
                dp({ type: 'table/save', payload: { user: {} } });
              }}
              title="退出登录"
            >
              {IconMap['tuichu']}
            </a>
          </div>
        )}
      >
        {props.children}
      </ProLayout>
    </ConfigProvider>
  );
};

export default connect(({ table }) => ({ table }))(PageView);
